<template>
<div class="app-container" style="height: 100vh; display: flex; flex-direction: column;">
    <el-container>
        <el-aside width="200px" style="height: 100vh;">
            <!-- logo -->
            <div class="menu-header" style="text-align: center; padding: 10px 0;">
                <img src="./img/CgJjZ2Y5zqiAbefUAAAomK2iBFk273.png" style="max-width: 100%; height: auto;">
            </div>
            <!-- 菜单 -->
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#409EFF" :collapse="false" @open="handleOpen" @close="handleClose">
                <template v-for="(route, index) in filteredRoutes" :key="index">
                    <el-sub-menu v-if="route.children" :index="route.path">
                        <template #title>
                            <!-- <el-icon><component :is="route.meta.icon ? route.meta.icon : 'el-icon-menu'"/></el-icon> -->
                            <span style="margin-left: 10px;">{{ route.name }}</span>
                        </template>
                        <el-menu-item v-for="subRoute in route.children" :key="subRoute.path" :index="subRoute.path" @click="navigateTo(subRoute.path)">{{ subRoute.name }}</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-else :index="route.path" @click="navigateTo(route.path)">{{ route.name }}</el-menu-item>
                </template>
            </el-menu>
        </el-aside>
        <el-container style="height: 100%;">
            <!-- Header -->
            <header class="app-header" style="background-color: #F9FAFC; display: flex; align-items: center; justify-content: center; height: 60px;">

            </header>
            <!-- Main -->
            <el-main style="height: calc(100% - 60px); overflow-y: auto;">
                <router-view></router-view>
            </el-main>
            <!-- Footer -->
            <el-footer style="height: 60px; display: flex; align-items: center; justify-content: center;">Build Version: 1.0.0</el-footer>
        </el-container>
    </el-container>
</div>
</template>

<script>
export default {
    name: "App",
    computed: {
        filteredRoutes() {
            return this.$router.options.routes;
        }
    },
    methods: {
        navigateTo(path) {
            this.$router.push(path);
        },
        handleOpen(key, keyPath) {
            console.log('Submenu opened:', key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log('Submenu closed:', key, keyPath);
        }
    }
}
</script>
